<template>
  <view class="default-loading" v-if="loading">
    <view class="loading">
      <uni-icons size="30" color="#999" type="spinner-cycle"></uni-icons>
    </view>
  </view>
  <view class="default-block" v-else>
    <view class="img">
      <image v-if="type == 1" src="@/static/images/default.png"></image>
      <image
        v-if="type == 2"
        src="@/static/images/repairFitting/restDay.png"
      ></image>
      <image
        v-if="type == 3"
        src="@/static/images/repairFitting/lineEmpty.png"
      ></image>
    </view>
    <view v-if="isObj=='string'">
      <view class="text"> {{text}}</view>
    </view>
    <view v-else>
      <view class="text" v-for="(item, index) in text" :key="index">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
	name: 'default-block',
	props: {
		type: {
			type: [String, Number],
			default: 1,
		},
		text: {
			type: [String, Array],
			default: '暂无数据',
		},
		loading: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		 isObj() {
			return typeof(this.text);
		 }
	},
	data() {
		return {};
	},
};
</script>

<style lang="scss" scoped>
@keyframes changeright {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.default-loading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300rpx;
  .loading {
    color: #999999;
    animation: changeright 2s linear infinite;
  }
}
.default-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 250rpx;
  .img {
    image {
      width: 64rpx;
      height: 64rpx;
    }
  }
  .text {
    width: 100%;
    color: #999999;
    font-size: 26rpx;
  }
}
</style>